<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <style>
        .form-group {
            width: 100%;
            box-sizing: border-box;
            padding: 10px;
            float: left;
            display: flex;
            flex-direction: row;
            align-items: center;
            margin-bottom: 20px;
        }

        @media (min-width: 768px) {
            .form-group {
                width: 33%;
            }
        }

        .container {
            display: flex;
            flex-direction: column;
            align-items: center;
            margin-top: 50px;
        }

        label {
            width: 150px;
            text-align: right;
            margin-right: 10px;
        }

        select,
        input[type="text"] {
            width: 200px;
            height: 30px;
            padding: 5px;
            border-radius: 5px;
            border: 1px solid #ccc;
        }

        .error {
            color: red;
            margin-left: 10px;
        }

        button {
            margin-left: 1100px;
            width: 280px;
            height: 50px;
            border-radius: 5px;
            border: none;
            display: block;
            background-color: cornflowerblue;
            color: white;
            cursor: pointer;
        }
    </style>
</head>

<body>
    <div class="container">
        <form>
            <div class="form-group">
                <label>称号：</label>
                <select id="title">
                    <option value="3">普通称号3攻速</option>
                    <option value="4">至尊称号4攻速</option>
                </select>
            </div>
            <div class="form-group">
                <label>武器装扮：</label>
                <select id="weapondressing">
                    <option value="4">高级装扮4攻速</option>
                    <option value="0">稀有装扮0攻速</option>
                </select>
            </div>
            <div class="form-group">
                <label>时装：</label>
                <select id="latestfashion">
                    <option value="16">稀有天空套装16攻速</option>
                    <option value="20">神器天空套装20攻速</option>
                </select>
            </div>
            <div class="form-group">
                <label>光环：</label>
                <input type="text" onkeyup="this.value=this.value.replace(/[^\d^\.^-]/g,'') "
                    onafterpaste="this.value=this.value.replace(/[^\d\.]/g,'') " id="halo" value="0" />
            </div>
            <div class="form-group">
                <label>快捷栏装备：</label>
                <input type="text" onkeyup="this.value=this.value.replace(/[^\d^\.^-]/g,'') "
                    onafterpaste="this.value=this.value.replace(/[^\d\.]/g,'') " id="shortcutbarequipment" value="0" />
            </div>
            <div class="form-group">
                <label>时装混搭补正：</label>
                <input type="text" onkeyup="this.value=this.value.replace(/[^\d^\.^-]/g,'') "
                    onafterpaste="this.value=this.value.replace(/[^\d\.]/g,'') " id="judge" value="0" />
            </div>
            <div class="form-group">
                <label>宠物：</label>
                <input type="text" onkeyup="this.value=this.value.replace(/[^\d^\.^-]/g,'') "
                    onafterpaste="this.value=this.value.replace(/[^\d\.]/g,'') " id="pet" value="5" />
            </div>
            <div class="form-group">
                <label>宠物装备：</label>
                <input type="text" onkeyup="this.value=this.value.replace(/[^\d^\.^-]/g,'') "
                    onafterpaste="this.value=this.value.replace(/[^\d\.]/g,'') " id="petequipment" value="4" />
            </div>
            <div class="form-group">
                <label>守护珠：</label>
                <input type="text" onkeyup="this.value=this.value.replace(/[^\d^\.^-]/g,'') "
                    onafterpaste="this.value=this.value.replace(/[^\d\.]/g,'') " id="guardianbead" value="3" />
            </div>
            <div class="form-group">
                <label>徽章：</label>
                <input type="text" onkeyup="this.value=this.value.replace(/[^\d^\.^-]/g,'') "
                    onafterpaste="this.value=this.value.replace(/[^\d\.]/g,'') " id="badge" value="8" />
            </div>
            <div class="form-group">
                <label>贴膜：</label>
                <input type="text" onkeyup="this.value=this.value.replace(/[^\d^\.^-]/g,'') "
                    onafterpaste="this.value=this.value.replace(/[^\d\.]/g,'') " id="film" value="0" />
            </div>
            <div class="form-group">
                <label>辟邪玉：</label>
                <input type="text" onkeyup="this.value=this.value.replace(/[^\d^\.^-]/g,'') "
                    onafterpaste="this.value=this.value.replace(/[^\d\.]/g,'') " id="dispeleviljade" value="0" />
            </div>
            <div class="form-group">
                <label>头肩：</label>
                <input type="text" onkeyup="this.value=this.value.replace(/[^\d^\.^-]/g,'') "
                    onafterpaste="this.value=this.value.replace(/[^\d\.]/g,'') " id="headwear" value="0" />
            </div>
            <div class="form-group">
                <label>上衣：</label>
                <input type="text" onkeyup="this.value=this.value.replace(/[^\d^\.^-]/g,'') "
                    onafterpaste="this.value=this.value.replace(/[^\d\.]/g,'') " id="upper" value="8" />
            </div>
            <div class="form-group">
                <label>下装：</label>
                <input type="text" onkeyup="this.value=this.value.replace(/[^\d^\.^-]/g,'') "
                    onafterpaste="this.value=this.value.replace(/[^\d\.]/g,'') " id="lower" value="20" />
            </div>
            <div class="form-group">
                <label>腰带：</label>
                <input type="text" onkeyup="this.value=this.value.replace(/[^\d^\.^-]/g,'') "
                    onafterpaste="this.value=this.value.replace(/[^\d\.]/g,'') " id="belt" value="45" />
            </div>
            <div class="form-group">
                <label>鞋子：</label>
                <input type="text" onkeyup="this.value=this.value.replace(/[^\d^\.^-]/g,'') "
                    onafterpaste="this.value=this.value.replace(/[^\d\.]/g,'') " id="shoe" value="0" />
            </div>
            <div class="form-group">
                <label>手镯：</label>
                <input type="text" onkeyup="this.value=this.value.replace(/[^\d^\.^-]/g,'') "
                    onafterpaste="this.value=this.value.replace(/[^\d\.]/g,'') " id="bracelet" value="0" />
            </div>
            <div class="form-group">
                <label>项链：</label>
                <input type="text" onkeyup="this.value=this.value.replace(/[^\d^\.^-]/g,'') "
                    onafterpaste="this.value=this.value.replace(/[^\d\.]/g,'') " id="necklace" value="15" />
            </div>
            <div class="form-group">
                <label>戒指：</label>
                <input type="text" onkeyup="this.value=this.value.replace(/[^\d^\.^-]/g,'') "
                    onafterpaste="this.value=this.value.replace(/[^\d\.]/g,'') " id="ring" value="0" />
            </div>
            <div class="form-group">
                <label>左槽：</label>
                <input type="text" onkeyup="this.value=this.value.replace(/[^\d^\.^-]/g,'') "
                    onafterpaste="this.value=this.value.replace(/[^\d\.]/g,'') " id="leftslot" value="5" />
            </div>
            <div class="form-group">
                <label>右槽：</label>
                <input type="text" onkeyup="this.value=this.value.replace(/[^\d^\.^-]/g,'') "
                    onafterpaste="this.value=this.value.replace(/[^\d\.]/g,'') " id="rightslot" value="8" />
            </div>
            <div class="form-group">
                <label>耳环：</label>
                <input type="text" onkeyup="this.value=this.value.replace(/[^\d^\.^-]/g,'') "
                    onafterpaste="this.value=this.value.replace(/[^\d\.]/g,'') " id="earrings" value="0" />
            </div>
            <div class="form-group">
                <label></label>
                <input style="width: 220px;background-color:cornflowerblue;height:50px;border-radius:5px;border:none;color:white;cursor:pointer;" type="button" id="submit" value="确定" />
            </div>
            <!-- <button type="button" style="margin-left: 80%;" id="submit">确定</button> -->
            
        </form>
    </div>
    <script>
        document.getElementById("submit").addEventListener("click", function () {
            var inputs = document.querySelectorAll("input[type='text']");
            var total_speed = 0.0;
            inputs.forEach(function (input) {
                var value = input.value;
                if (isNaN(parseFloat(value, 10))) {
                    alert("请输入整型数字或者浮点数!");
                }
                else {
                    total_speed += parseFloat(value, 10);
                }
            });

            var title = parseFloat(document.getElementById("title").value, 10);
            var weapondressing = parseFloat(document.getElementById("weapondressing").value, 10);
            var latestfashion = parseFloat(document.getElementById("latestfashion").value, 10);
            total_speed += title + weapondressing + latestfashion;

            var skill_attack = 0;
            if (total_speed >= 100 && total_speed < 120) {
                skill_attack = 10;
            }
            else if (total_speed >= 120 && total_speed < 140) {
                skill_attack = 20;
            }
            else if (total_speed >= 140) {
                skill_attack = 30;
            }
            alert("当前攻速为：" + total_speed + "\n可以触发技能攻击力：" + skill_attack);
        });
    </script>
</body>

</html>